import React from 'react';
import { Button } from 'antd';
import { inject, observer } from 'mobx-react';
import { WeaSwitch, WeaTableNew } from 'comsMobx';
import { WeaTab, WeaTools, WeaFormItem, WeaSearchGroup, WeaLocaleProvider, WeaRightMenu } from 'ecCom';
import { toJS } from 'mobx';

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

@inject('reportStore')
@inject('reportFlowDetailListDialogStore')
@observer
class ReportFlowDetailListDialogComponent extends React.Component {
  componentWillReceiveProps(nextProps) {
    const { reportFlowDetailListDialogStore } = this.props;

    if (this.props.searchParams !== nextProps.searchParams
      || this.props.status !== nextProps.status
      || this.props.key !== nextProps.key) {
      const { searchParams } = nextProps;
      const p2 = { status: reportFlowDetailListDialogStore.condition_status };
      const p3 = { echartKey: reportFlowDetailListDialogStore.condition_key };
      Object.assign(searchParams, searchParams, p2);
      Object.assign(searchParams, searchParams, p3);


      reportFlowDetailListDialogStore.doSearch(searchParams);
    }
  }

  componentDidMount() {
    const { reportFlowDetailListDialogStore } = this.props;
    reportFlowDetailListDialogStore.buildSearchCondition();

    const { searchParams } = this.props;
    const p2 = { status: reportFlowDetailListDialogStore.condition_status };
    const p3 = { echartKey: reportFlowDetailListDialogStore.condition_key };
    Object.assign(searchParams, searchParams, p2);
    Object.assign(searchParams, searchParams, p3);
    reportFlowDetailListDialogStore.doSearch(searchParams);
  }

  renderSearchAdForm() {
    const { reportFlowDetailListDialogStore } = this.props;
    const conditioninfo = toJS(reportFlowDetailListDialogStore.searchCondition.conditions) || toJS(reportFlowDetailListDialogStore.searchCondition.condition);

    const { form } = reportFlowDetailListDialogStore;
    const { isFormInit } = form;

    let group = [];
    isFormInit && conditioninfo.map((c, index) => {
      let items = [];
      c.items.map((field) => {
        let col = 2;
        if (field.conditionType.toUpperCase() == WeaTools.types.CASCADER) col = 1;
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jkgzna@${field.domkey[0]}`}
            label={`${field.label}`}
            labelCol={{ span: `${field.labelcol}` }}
            ratio1to2
            error={form.getError(field)}
            tipPosition="bottom"
            wrapperCol={{ span: `${field.fieldcol}` }}
          >
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@4yps18@${field.domkey[0]}`} fieldConfig={field} form={form} onEnterSearch={() => this.doSearch()} />
          </WeaFormItem>),
          col,
          hide: form.isHide(field, () => false),
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@c1cgs5@${index}`} needTigger={false} showGroup={true} items={items} />);
    });
    return (<div>{group}</div>);
  }

  doSearch() {
    const { reportFlowDetailListDialogStore } = this.props;
    const { searchParams } = this.props;
    const p2 = { status: reportFlowDetailListDialogStore.condition_status };
    const p3 = { echartKey: reportFlowDetailListDialogStore.condition_key };

    Object.assign(searchParams, searchParams, p2);
    Object.assign(searchParams, searchParams, p3);

    let tempSearchParams = Object.assign({}, searchParams, reportFlowDetailListDialogStore.getFormParams());
    reportFlowDetailListDialogStore.doSearch(tempSearchParams);
  }

  renderSearchAdButtons() {
    const { reportFlowDetailListDialogStore } = this.props;
    return [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qtxqvk@search`} type="primary" onClick={() => this.doSearch()}>{getLabel('197', '搜索')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@df4t7y@reset`} type="ghost" onClick={() => reportFlowDetailListDialogStore.form.reset()}>{getLabel('2022', '重置')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qa4f7k@cancel`} type="ghost" onClick={() => reportFlowDetailListDialogStore.changeShowSearchAd(false)}>{getLabel('31129', '取消')}</Button>),
    ];
  }

  render() {
    const { reportFlowDetailListDialogStore } = this.props;

    return (
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2plz1t`} datas={this.rightMenuDatas()}>
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@w9dsje`}
          searchType={['base', 'advanced']} // 搜索类型
          showSearchAd={reportFlowDetailListDialogStore.showSearchAd}
          setShowSearchAd={v => reportFlowDetailListDialogStore.changeShowSearchAd(v)}
          buttonsAd={this.renderSearchAdButtons()}
          searchsAd={this.renderSearchAdForm()}
          onSearch={() => this.doSearch()}
          searchsBaseValue={reportFlowDetailListDialogStore.getSearchsBaseValue()}
          onSearchChange={v => reportFlowDetailListDialogStore.setSearchsBaseValue(v)}
        />
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@98svz9`}
          hasOrder={true}
          needScroll={true}
          scroll={{ y: 550 }}
          loading={reportFlowDetailListDialogStore.loading}
          comsWeaTableStore={reportFlowDetailListDialogStore.tableStore}
          getColumns={this.getColumns}
        />
      </WeaRightMenu>
    );
  }

  getColumns = (columns) => {
    let newColumns = columns.map(column =>
      // if(column.dataIndex == "odoctype"){
      // 	return {
      // 		...column, render: (text, record, index) => {
      // 			return (<p  class="wea-odoctype-labelp" title={record.odoctypespan}>{record.odoctypespan}</p>);
      // 		}
      // 	}
      // }
      // else {
      column,
      // }
    );
    return newColumns;
  }

  rightMenuDatas() {
    const { tableStore } = this.props.reportFlowDetailListDialogStore;
    const datas = [
      {
        key: '1',
        icon: <i className="icon-coms-home" />,
        content: getLabel('32535', '显示列定制'),
        onClick: () => {
          tableStore.setColSetVisible(true);
          tableStore.tableColSet(true);
        },
      },
    ];
    return datas;
  }
}

export default ReportFlowDetailListDialogComponent;
